<html>
    <head>
        <meta charset="UTF-8">
        <title>3D方块</title>
        <style>
        body{
            height: 100%;
            background: radial-gradient(circle,yellow,#0ff,green);
            margin: 0;
            /* 弹性布局 */
            display: flex;
            /* 在局部方向的对齐方式 */
            justify-content: center;
            /* 在垂直与布局方向上的对齐方式 */
            align-items: center;

            perspective: 1200px;
        }
        @keyframes spin{
            0%{
                transform: rotateY(0) rotateX(0);
            }
            /* 25%{
                transform: rotate(90deg)
            } */
            100%{
                transform: rotateY(360deg) rotateX(720deg);
            }
        }

        #container{
            width: 200px;
            height: 200px;
            /* border: 1px solid red; */
            /* 当元素发生3D变形时，子元素也保持变形效果 */
            transform-style: preserve-3d;
            /* transform: rotateX(40deg) rotateY(20deg); */
            animation-name: spin;
            animation-duration: 8s;
            animation-iteration-count: infinite;
            animation-timing-function: linear;
        }
        /* 为页面中class值包含pic值得元素设置样式 */
        /* .pic{
            width: 200px;
            height: 200px;
        } */
        #container img {
            width: 200px;
            height: 200px;
            position: absolute;
        }
        #front{
            transform: translateZ(100px)
        }
        #back{
            transform: translateZ(-100px)
        }
        #top{
            transform: translateY(-100px) rotateX(90deg);
        }
        #bottom{
            transform: translateY(100px) rotateX(90deg);

        }
        #left{
            transform: translateX(-100px) rotateY(90deg);
        }
        #right{
            transform: translateX(100px) rotateY(90deg);
        }
        </style>
    </head>
    <body>
        <div id="container">
            <img src="1.jpg" alt="" class="pic" id="front">
            <img src="2.jpg" alt="" class="pic" id="back">
            <img src="3.jpg" alt="" class="pic" id="top">
            <img src="4.jpg" alt="" class="pic" id="bottom">
            <img src="5.jpg" alt="" class="pic" id="left">
            <img src="6.jpg" alt="" class="pic" id="right">    
        </div>
    </body>
</html>